
<script setup>
</script>

<template>
  <router-view />
</template>

<style lang="scss">
  @font-face { font-family: "iconfont"; src: url('//at.alicdn.com/t/font_3301984_d7wt4zw9ayb.ttf?t=1653015158930') format('truetype'); }
  .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }

  .el-checkbox__label { padding-left:5px!important; }
  .el-drawer__body { overflow: auto; }
  
  html,body {padding:0; margin: 0; width: 100%; height: 100%; }
  a { color: #333; text-decoration: none; }
  input[type="text"],input[type="password"],textarea { margin: 0; padding:0; box-sizing: border-box; padding:0 0 0 15px!important; border-radius: 0!important; outline:none; }
  textarea { padding-top: 10px!important; }
  .el-input__inner { border-radius: 0!important;}
 
  .el-switch__label { font-weight: normal!important; }
  .el-radio__label { font-weight: normal!important; }
  .el-checkbox__label { font-weight: normal!important; }
  /* .el-input__suffix { align-items: center; } */
  /* .el-date-editor .el-input__suffix-inner { display: flex; }
  .el-date-editor .el-range__icon, .el-date-editor  .el-range__close-icon { display: flex; } */
  .hidtext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .searchDiv { padding: 10px 0 15px 0; display: flex; }
  .searchRight { flex: 1; display: flex; justify-content: flex-end; }
  .search_key { width:140px!important; margin-left: 5px; }
  .search_select { margin: 0 5px 0 0; }

  /* #btn */
  .elhid { display: none!important;; }
  .btn { height: 32px; line-height: 32px; display: inline-block; cursor: pointer; padding: 0 15px; font-size: 12px; border-radius: 2px; color: #333; background-color: #fff; border: 1px solid #c0c6cc;}
  .btn:hover { box-shadow: 0 2px 4px 0 rgb(0 0 0 / 16%); }
  .add { height: 32px; line-height: 32px; box-sizing: border-box; background-color: #0064c8 ; margin-right: 8px; color: rgb(248, 248, 248); font-size: 12px; cursor: pointer; }
  .search, .refresh, .download { height: 32px; line-height: 32px; width: 32px; font-size: 16px; padding:0; border:1px solid #d8dae2; box-sizing: border-box; text-align: center; cursor: pointer; }
  .search::after { content: '\e63c'; font-family: "iconfont"; }
  .search { border-left: 0; }
  .refresh, .download { margin-left: 5px; }
  .refresh::after { content:'\e650'; font-family: "iconfont"; }
  .download::after { content:'\e640'; font-family: "iconfont"; }

  /* sifter-box 表格筛选 */
  .sifter-box{
    width: 100%;padding: 10px;box-sizing: border-box; justify-content: space-between;
    .el-form-item{margin-bottom: 0 !important;margin-right: 10px !important;}
  }
  /* table */
  .listDiv { display: flex; flex-direction: column; border-top: 1px solid #f0f0f0; box-sizing: border-box;}
  .table { display: flex; flex-direction: column; color: #333; font-size:12px; border-top:1px solid #d8dae2; /*flex:1;*/ margin-bottom: 20px; border-bottom: 1px solid #d8dae2; min-height: 0; /*这会导致内部撑开而不撑爆 */ }
  .table ul, .table li { list-style: none; padding:0; margin: 0; display: flex; align-items: center; }
  .table ul { height: 40px; align-items: stretch; border:1px solid #d8dae2; border-top: 0; border-right: 0; }
  .table .head { min-height: 40px; height: 40px; background-color: #edf0f6; font-weight: bold; overflow-y: scroll; }
  .table .body {  min-height: 0; overflow-y: scroll; }
  .table .body .btns { color:#0070CC; }
  .table .body .btns a { color:#0070CC; margin: 0 5px 0 5px; cursor: pointer; }
  .table li { padding-left: 5px; border-right: 1px solid #d8dae2; }
  .table .body ul:last-child { border-bottom: 0; }
  .pages { height: 60px; display: flex; justify-content: flex-end; font-size:12px; }
  .pages u { height: 30px;  display:flex; align-items: center; text-decoration: none; padding-right: 20px; }
  .pages a,.pages span, .pages samp { width: 30px; height: 30px;  display:flex; justify-content: center; align-items: center; }
  .pages a,.pages span { cursor: pointer; }
  .pages span { border:1px solid #d8dae2; }
  .pages .p_back::after { content:'\e744'; font-family: "iconfont"; }
  .pages .p_next::after { content:'\e743'; font-family: "iconfont"; }
  
  .edit-box{
      .title-box{width: 100%;padding: 16px;border-bottom: solid 1px #f0f0f0;box-sizing: border-box;}
      .form-box{
          width: 100%;padding: 16px;box-sizing: border-box;
      }
  }

  .el-table{
    min-height: 600px;
  }



.state-btn-info{padding: 0 4px;box-sizing: border-box;border-radius: 2px;font-size: 10px;background: #f0f0f0;color: #999;}
.state-btn-primary{padding: 0 4px;box-sizing: border-box;border-radius: 2px;font-size: 10px;background: rgba(0,122,255,0.1);color: rgba(0,122,255,1);}
.state-btn-success{padding: 0 4px;box-sizing: border-box;border-radius: 2px;font-size: 10px;background: rgba(66,207,149,0.1);color: rgba(66,207,149,1);}
.state-btn-warning{padding: 0 4px;box-sizing: border-box;border-radius: 2px;font-size: 10px;background: rgba(240,173,78,0.1);color: rgba(240,173,78,1);}
.state-btn-error{padding: 0 4px;box-sizing: border-box;border-radius: 2px;font-size: 10px;background: rgba(221,82,77,0.1);color: rgba(221,82,77,1);}

.label-btn-info{padding: 0 6px;box-sizing: border-box;border-radius: 2px;font-size: 10px !important;background: #f0f0f0;color: #999;}
.label-btn-primary{padding: 0 6px;box-sizing: border-box;border-radius: 2px;font-size: 10px !important;background: rgba(0,122,255,0.1);color: rgba(0,122,255,1);}
.label-btn-success{padding: 0 6px;box-sizing: border-box;border-radius: 2px;font-size: 10px !important;background: rgba(66,207,149,0.1);color: rgba(66,207,149,1);}
.label-btn-warning{padding: 0 6px;box-sizing: border-box;border-radius: 2px;font-size: 10px !important;background: rgba(240,173,78,0.1);color: rgba(240,173,78,1);}
.label-btn-error{padding: 0 6px;box-sizing: border-box;border-radius: 2px;font-size: 10px !important;background: rgba(221,82,77,0.1);color: rgba(221,82,77,1);}
.label-btn-other{padding: 0 6px;box-sizing: border-box;border-radius: 2px;font-size: 10px !important;background: rgba(144, 76, 233, 0.1);color: rgba(144, 76, 233, 1);}
.label-btn-pink{padding: 0 6px;box-sizing: border-box;border-radius: 2px;font-size: 10px !important;background: rgba(255, 85, 170, 0.14);color: rgb(255, 107, 181);}

.btn-gray{color: #999;background: #f0f0f0;font-size:14px;}
.btn-info{color: #fff;background: #999;font-size:14px;}
.btn-primary{color: #fff;background: rgba(0,122,255,1);font-size:14px;}
.btn-success{color: #fff;background: rgba(66,207,149,1);font-size:14px;}
.btn-warning{color: #fff;background: rgba(240,173,78,1);font-size:14px;}
.btn-error{color: #fff;background: rgba(221,82,77,1);font-size:14px;}

  /* tinymce */
  .tox .tox-tbtn--select { 
    width:85px!important; 
  }
  .tox-statusbar{display: none !important;}

  /* 时间框 */
  /* .date_picker { width: 120px; } */
  .date_picker input { padding-left: 30px!important; }
  .date_range input { padding-left: 5px!important; padding-right: 10px; }
  .pointer{cursor: pointer;}
  .return{font-size: 18px;color:#0070CC;}

  /* 常用样式类 */
  .mg20{margin: 20px;}
  .mg10{margin: 10px;}
  .ml5 { margin-left: 5px !important; }
  .ml10 { margin-left: 10px !important; }
  .ml15 { margin-left: 15px !important; }
  .ml20 { margin-left: 20px !important; }
  .ml30 { margin-left: 30px !important; }
  .mr5 { margin-right: 5px !important; }
  .mr10 { margin-right: 10px !important; }
  .mr15 { margin-right: 15px !important; }
  .mr20 { margin-right: 20px !important; }
  .mr30 { margin-right: 30px !important; }
  .mb5 { margin-bottom: 5px !important; }
  .mb10 { margin-bottom: 10px !important; }
  .mb15 { margin-bottom: 15px !important; }
  .mb20 { margin-bottom: 20px !important; }
  .mb30 { margin-bottom: 30px !important; }
  .mt5 { margin-top: 5px !important; }
  .mt10 { margin-top: 10px !important; }
  .mt15 { margin-top: 15px !important; }
  .mt20 { margin-top: 20px !important; }
  .mt30 { margin-top: 30px !important; }

  .pl10 { padding-left: 10px; box-sizing: border-box}
  .pl20 { padding-left: 20px; box-sizing: border-box}
  .pr10 { padding-right: 10px; box-sizing: border-box}
  .pr20 { padding-right: 20px; box-sizing: border-box}
  .pb10 { padding-bottom: 10px; box-sizing: border-box}
  .pb20 { padding-bottom: 20px; box-sizing: border-box}
  .pt10 { padding-top: 10px; box-sizing: border-box}
  .pt20 { padding-top: 20px; box-sizing: border-box}
  .pd10 { padding: 10px;box-sizing: border-box}
  .pd15 { padding: 15px;box-sizing: border-box}
  .pd20 { padding: 20px;box-sizing: border-box}
  .pd30 { padding: 30px;box-sizing: border-box}

  .pd10-row{padding-left: 10px;padding-right:10px;box-sizing: border-box;}
  .pd20-row{padding-left: 20px;padding-right:20px;box-sizing: border-box;}
  .pd30-row{padding-left: 30px;padding-right:30px;box-sizing: border-box;}
  .pd10-column{padding-top: 10px;padding-bottom:10px; box-sizing: border-box;}
  .pd20-column{padding-top: 20px;padding-bottom:20px; box-sizing: border-box;}
  .pd30-column{padding-top: 30px;padding-bottom:30px; box-sizing: border-box;}

  .flex-row { display: flex;flex-direction: row;}
  .flex-row-center { @extend .flex-row;align-items: center;}
  .flex-row-end { @extend .flex-row;align-items: center;justify-content: flex-end;}
  .flex-column { display: flex;flex-direction: column;}
  .flex-column-center { @extend .flex-column;align-items: center;}
  .flex-center { display: flex !important;align-items: center;justify-content: center;}
  .al-flex-end{align-items: flex-end;}
  .al-flex-start{align-items: flex-start;}
  .ju-flex-end{justify-content: flex-end;}
  .ju-flex-start{justify-content: flex-start;}
  .ju-between{justify-content: space-between;}
  .al-between{align-items: space-between;}
  .wrap{flex-wrap: wrap;}

  .inline-b{display: inline-block;}
  .inline-f{display: inline-flex;}
  .text-align-end{text-align: end;}
  .text-align-start{text-align: start;}

  .radius4{border-radius: 4px;}
  .radius10{border-radius: 10px;}


  .floatLeft { float: left; }
  .floatRight { float: right; }

  .flex1{flex: 1;}

  // 超出部分显示省略号 1行
  .lineOne{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; }
  //-2行
  .lineTwo{ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }

  .w30{width: 30% !important;}
  .w40{width: 40% !important;}
  .w48{width: 48% !important;}
  .w50{width: 50% !important;}
  .w60{width: 60% !important;}
  .w80{width: 80% !important;}
  .w90{width: 90% !important;}
  .w92{width: 92% !important;}
  .w94{width: 94% !important;}
  .w96{width: 96% !important;}
  .w98{width: 98% !important;}
  .w100{width: 100% !important;}

  .mini-size{font-size: 12px}
  .mini-gray-size{font-size: 12px;color:#999;}
  .base-size{font-size: 14px}
  .base-gray-size{font-size: 14px;color:#999;}
  .size18{font-size: 18px}
  .large-size{font-size: 20px}
  .large-gray-size{font-size: 20px;color:#999;}
  .size24{font-size: 24px}
  .size28{font-size: 28px}
  .size32{font-size: 32px}

  .weight{font-weight: 600;}

  .write-color{color: #fff;}
  .base-color{color:#409EFF;}
  .success-color{color:#67C23A;}
  .warning-color{color:#E6A23C;}
  .danger-color{color:#F56C6C;}
  .base-gray-color{color:#666;}
  .gray-color{color:#909399;}

  .write-bg{background:#fff;}
  .base-bg{background:#409EFF;}
  .success-bg{background:#67C23A;}
  .warning-bg{background:#E6A23C;}
  .danger-bg{background:#F56C6C;}
  .gray-bg{background:#909399;}
  .mini-gray-bg{background:#f0f0f0;}

  .overflowy{overflow-y: auto;}


  .head-title{font-size: 24px;}
  .line{width: 100%;height:1px;background: #f0f0f0}
  .line-w{width: 100%;height:3px;background: #f0f0f0}
  .line-h{
    width: 2px;height:auto;background: #bbbbbb
  }

  .border{border: solid 1px #f0f0f0}

  .el-form-item__content{@extend .flex-center;}
  .title-box{
    .el-form-item{margin-bottom: -5px !important;}
  }
  .el-image{background: #f0f0f0;}

  .home_icon::before{content: '\e6ba'; font-family: iconfont; color: rgb(182, 182, 182); margin-right: 2px;}
  .v-html{max-height: 1000px; overflow-y: auto;}
  .v-html img{width: 100%;}
</style>
